import React, { PureComponent, CSSProperties } from 'react';
import classnames from 'classnames';
import "./Loading.css"
const DIAMETER = 62;

export interface LoadingProps{
    prefixCls?: string;
    className?: string;
    style?: CSSProperties;
    size?: 'lg' | 'md';
    strokeWidth?: number;
    percent?: number;
    type?: 'circular' | 'spinner';
    loading?: Boolean;
}

const Circular = (props: LoadingProps) => {
    const { prefixCls, className, size, percent, strokeWidth, loading, style } = props;
    const cls = classnames(className, prefixCls, {
        [`${prefixCls}--${size}`]: !!size,
        [`${prefixCls}--circular`]: loading,
    });

    const half = DIAMETER / 2;
    const r = half - (strokeWidth as number) / 2;
    const round = 2 * Math.PI * r;
    const lineStyle = {
        strokeDasharray: `${(round * (percent as number)) / 100} ${round}`,
        strokeWidth,
    };

    if (loading) {
        return (
            <span className={cls} style={style}>
        <svg viewBox={`${DIAMETER / 2} ${DIAMETER / 2} ${DIAMETER} ${DIAMETER}`}>
          <circle cx={DIAMETER} cy={DIAMETER} r={r} fill="none" style={{ strokeWidth }} />
        </svg>
      </span>
        );
    }

    return (
        <span className={cls} style={style}>
      <svg viewBox={`0 0 ${DIAMETER} ${DIAMETER}`}>
        <circle
            className={`${prefixCls}__path`}
            cx={half}
            cy={half}
            r={r}
            fill="none"
            style={{ strokeWidth }}
        />
        <circle
            className={`${prefixCls}__line`}
            cx={half}
            cy={half}
            r={r}
            fill="none"
            style={lineStyle}
        />
      </svg>
    </span>
    );
};

const Spinner = (props: LoadingProps) => {
    const { prefixCls, className, size, style } = props;
    const cls = classnames(prefixCls, `${prefixCls}--spinner`, className, {
        [`${prefixCls}--${size}`]: !!size,
    });
    const spinner: any[] = [];

    for (let i = 0; i < 12; i++) {
        spinner.push(<div key={i} />);
    }

    return (
        <div className={cls} style={style}>
            {spinner}
        </div>
    );
};

export default class Loading extends PureComponent<LoadingProps, any> {
    static defaultProps: LoadingProps = {
        prefixCls: 'za-activity-indicator',
        strokeWidth: 5,
        percent: 20,
        type: 'circular',
        loading: true,
    };

    render() {
        const { type } = this.props;
        return type !== 'spinner' ? <Circular {...this.props} /> : <Spinner {...this.props} />;
    }
}
